<template>
  <div>
    <div id="about">
      <div class="about">
        <div class="about-aside">
          <div class="aside-box">
            <div
              v-for="(item,i) in FooterArticle"
              :key="i"
              class="aside-box-item"
              :class="activeIndex == i && 'active'"
              @click="activeIndex = i "
            >
              <span>{{item.ClassName}}</span>
            </div>
          </div>
        </div>
        <div class="about-container">
          <div class="about-us">
            <div class="about-header">
              <div class="header-tabs">
                <div
                  class="tab-menu"
                  :class="aboutIndex == i && 'active'"
                  @click="aboutIndex = i "
                  v-for="(item,i) in FooterArticle[activeIndex].Content"
                  :key="i"
                >
                  <span>{{item.Title}}</span>
                </div>
              </div>
            </div>
            <div class="about-content" v-if="FooterArticle[activeIndex].Content[aboutIndex]">
              <div v-html="FooterArticle[activeIndex].Content[aboutIndex].Description"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer :articleList="FooterArticle"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Abouts from "@/components/Abouts";
export default {
  name: "con",
  components: {
    Abouts,
    Footer
  },
  async asyncData({ $axios, params }) {
    let tags = []
    if (params.con) {
      tags = params.con.split(".")[0].split("-");
    }
    let contentList = [];
    let FooterArticle = [];
    try {
      let Articles = await $axios.get("/Articles");
      FooterArticle = Articles.data;
    } catch (err) {}

    let activeIndex = 0;
    let aboutIndex = 0;

    FooterArticle.forEach((item, index) => {
      if (tags[0] == item.ClassID) {
        activeIndex = index;
        if (Array.isArray(item.Content)) {
          item.Content.forEach((con, j) => {
            if (tags[1] == con.ContentID) {
              aboutIndex = j;
            }
          });
        }
      }
    });

    return {
      FooterArticle,
      activeIndex,
      aboutIndex
    };
  },

  methods: {
    handleChoose(i) {
      this.contentList = this.articleList[i].Content;
    }
  }
};
</script>

<style lang="less">
#about {
  width: 100%;
  background: rgba(244, 244, 244, 1);
  padding-top: 20px;
  padding-bottom: 76px;
}
.about {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .about-aside {
    width: 233px;
    height: 486px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .aside-box {
      display: flex;
      flex-direction: column;
      .aside-box-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 55px;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        border-bottom: 1px solid rgba(244, 244, 244, 1);
        position: relative;
        &:hover::after {
          content: "";
          display: inline-block;
          width: 5px;
          height: 31px;
          background: @color;
          position: absolute;
          left: 0;
          top: 12px;
        }
      }
    }
  }
  .aside-box-item.active {
    &::after {
      content: "";
      display: inline-block;
      width: 5px;
      height: 31px;
      background: @color;
      position: absolute;
      left: 0;
      top: 12px;
    }
  }
  .about-us {
    width: 947px;
  }
  .about-header {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .header-tabs {
      display: flex;
      align-items: center;
      padding-left: 33px;
      .tab-menu {
        margin-right: 40px;
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
        min-width: 82px;
        text-align: center;
        position: relative;
        cursor: pointer;
        &:hover {
          color: @color;
        }
        &:hover::before {
          content: "";
          display: inline-block;
          background-image: url(/img/personal/line_icon.png);
          background-repeat: no-repeat;
          width: 100%;
          height: 4px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
      .active {
        &::before {
          content: "";
          display: inline-block;
          background-image: url(/img/personal/line_icon.png);
          background-repeat: no-repeat;
          width: 100%;
          height: 4px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
  .about-content {
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin-top: 20px;
    padding: 30px;
  }
}
</style>
